<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>延时定时器</title>
    <style type="text/css">
        #screen {
            width: 250px;
            height: 50px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<section id="screen"></section>
<button id="start-btn">开启延时定时器</button>
<button id="stop-btn">停止延时定时器</button>

<script type="text/javascript">
    window.onload = () => {
        let timer01;
        let startBtn = document.querySelector("#start-btn");
        let screen = document.querySelector("#screen");
        startBtn.onclick = () => {
            timer01 = setTimeout(() => {
                screen.innerHTML = "start!";
            }, 3000);
        };

        let stopBtn = document.querySelector("#stop-btn");
        stopBtn.onclick = () => {
            clearTimeout(timer01);
        };
    }
</script>
</body>
</html>